<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<!--定义好页面编码 -->
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--描述：这里定义好移动端的自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 模板</title>
    <!-- 引入好Bootstrap css样式文件 -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--描述：引入js文件 记住一定要先引入JQuery的支持-->
    <script src="js/jquery-1.12.4.js"></script>
    <!-- 引入bootStrap的js文件-->
    <script src="js/bootstrap.js"></script>
  </head>
  <body>
  	<!-- 这里写代码-->
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<ul class="media-list">
							<li class="media">
								<!-- 里面就和之前使用media一模一样的-->
								<div class="pull-left">
									<a href="#"><img src="img/F9EC3906-5740-4D2A-97DC-864F5066D1BD.jpg" class="media-object" style="width:100px"></a>
								</div>
								<div class="media-body">
									<div class="media-heading h4">
										我的靓照
									</div>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 
										Donec lacinia congue felis in faucibus.
									</p>
								</div>
							</li>
							<li class="media">
								<!-- 里面就和之前使用media一模一样的-->
								<div class="pull-left">
									<a href="#"><img src="img/F9EC3906-5740-4D2A-97DC-864F5066D1BD.jpg" class="media-object" style="width:100px"></a>
								</div>
								<div class="media-body">
									<div class="media-heading h4">
										我的靓照
									</div>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 
										Donec lacinia congue felis in faucibus.
									</p>
								</div>
							</li>
							<li class="media">
								<!-- 里面就和之前使用media一模一样的-->
								<div class="pull-left">
									<a href="#"><img src="img/F9EC3906-5740-4D2A-97DC-864F5066D1BD.jpg" class="media-object" style="width:100px"></a>
								</div>
								<div class="media-body">
									<div class="media-heading h4">
										我的靓照
									</div>
									<p>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 
										Donec lacinia congue felis in faucibus.
									</p>
								</div>
							</li>
					</ul>
				</div>
			</div>
		</div>
  </body>
</html>